<template>
    <a-layout class="userManageRoot">

        <a-layout-content style="display: flex;flex-direction: column;">

            <PageHeader>
                <a-button v-has-permission="'user:add'" type="primary" @click="addVisible=true">添加用户</a-button>
            </PageHeader>
            <!--<div style="background: #fff;margin-top: 1px;padding-left: 18px;padding-right: 18px; height: 50px;display: flex;align-items: center">-->
                <!--<h2 style="flex: 1">用户管理</h2>-->

                <!--<a-button v-has-button-permission="'user:add'" type="primary" @click="addVisible=true">添加用户</a-button>-->
            <!--</div>-->
            <div ref="tableWrapper"  style="flex: 1;background: #fff;overflow-y: auto">

            <a-table
                    :scroll="{ y : (this.$refs.tableWrapper ? this.$refs.tableWrapper.offsetHeight - 120:0  ) }"
                    rowKey="userId"
                    :columns="columns" :dataSource="table.records"
                    :pagination="false"
                  >

                <span slot="userLock" slot-scope="text, record">
                      {{text ? "已冻结":"正常"}}
                </span>

                <span slot="userExpire" slot-scope="text, record">
                      {{(text == null || text == '' ) ? "永不过期":text}}
                </span>

                <span slot="userId" slot-scope="text, record" class="oper">
                    <a-icon type="edit" title="编辑" theme="twoTone" v-has-permission="'user:edit'"
                            @click="()=>{curUserId = text;editVisible = true}"/>
                    <a-icon type="eye" title="编辑角色信息"  theme="twoTone" v-has-permission="'user:editRole'"
                            @click="curUserId  = text;roleVisible=true"/>

                    <a-popconfirm title="确认删除此用户吗" v-has-permission="'user:delete'" @confirm="deleteUser(text)"
                                  okText="确认" cancelText="取消">
                        <a-icon type="delete"  theme="twoTone"  twoToneColor="#f50" title="删除"/>
                    </a-popconfirm>
                </span>


            </a-table>
            </div>
            <a-pagination v-model="table.current" :total="table.total" :pageSize="table.size" @change="loadUsers"/>


            <a-drawer
                    width="350"
                    :destroyOnClose="true"
                    :maskClosable="true"
                    placement="right"
                    title="编辑用户角色"
                    @close="roleVisible=false"
                    :visible="roleVisible"
            >

                <UserRoleEdit @ok="roleVisible=false" v-model="curUserId" ref="userRoleEdit"></UserRoleEdit>


                <div class="drawerBottomWrapper">
                    <a-button @click="()=>{this.$refs.userRoleEdit.submitData()}" type="primary">
                        提交
                    </a-button>
                </div>
            </a-drawer>


            <a-drawer
                    width="350"
                    :destroyOnClose="true"
                    :maskClosable="true"
                    placement="right"
                    title="添加用户"
                    @close="addVisible=false"
                    :visible="addVisible"
            >

                <UserAdd @ok="loadUsers();addVisible=false" ref="addUser"></UserAdd>


                <div class="drawerBottomWrapper">
                    <a-button @click="()=>{this.$refs.addUser.submitData()}" type="primary">
                        提交
                    </a-button>
                </div>
            </a-drawer>


            <a-drawer
                    width="350"
                    :destroyOnClose="true"
                    :maskClosable="true"
                    placement="right"
                    title="编辑用户"
                    @close="editVisible=false"
                    :visible="editVisible">

                <UserEdit ref="editUser" v-model="curUserId" @ok="editVisible=false;loadUsers()"></UserEdit>

                <div class="drawerBottomWrapper">
                    <a-button @click="()=>{this.$refs.editUser.submitData()}" type="primary">
                        提交
                    </a-button>
                </div>
            </a-drawer>


        </a-layout-content>


    </a-layout>


</template>

<script>

    import UserAdd from './UserAdd';
    import UserEdit from './UserEdit';
    import UserRoleEdit from  './UserRoleEdit';
    import {
        Layout,
        Form, DatePicker,Input,Button,Icon,Radio,TreeSelect,
        Pagination,
        Popconfirm,
        Table,
        Drawer,message

    } from 'ant-design-vue';


    export default {
        name: "UserManage",
        components: {
            UserAdd,
            UserEdit,
            UserRoleEdit,
            ALayout:Layout,
            ALayoutSider:Layout.Sider,
            ALayoutContent:Layout.Content,
            ALayoutHeader:Layout.Header,
            APagination:Pagination,
            ARadioButton:Radio.Button,
            ARadioGroup:Radio.Group,
            AFormItem:Form.Item,
            AForm:Form,
            ADatePicker:DatePicker,
            AInput:Input,
            AButton:Button,
            AIcon:Icon,
            ATreeSelect:TreeSelect,
            APopconfirm:Popconfirm,
            ATable:Table,
            ADrawer:Drawer

        },
        data() {
            return {
                table: {
                    current: 1,
                    size: 10,
                    total: 0,
                    records: []
                },
                addVisible: false,
                editVisible: false,
                roleVisible: false,
                curUserId: '',
                routes: [],
                columns: [{
                    title: '用户账号',
                    dataIndex: 'userName',
                    width: '20%'
                },
                    {
                        title: '用户昵称',
                        dataIndex: 'userNickname',
                        width: '20%'
                    },
                    {
                        title: '账号状态',
                        dataIndex: 'userLock',
                        width: '10%',
                        scopedSlots: {customRender: 'userLock'}
                    },
                    {
                        title: '过期时间',
                        dataIndex: 'userExpire',
                        width: '20%',
                        scopedSlots: {customRender: 'userExpire'}
                    },
                    {
                        title: '创建时间',
                        dataIndex: 'userCreatetime',
                        width: '10%'
                    },
                    {
                        title: '操作',
                        width: '20%',
                        dataIndex: 'userId',
                        scopedSlots: {customRender: 'userId'}
                    }
                ]
            };
        },
        mounted() {
            this.loadUsers();
        },
        methods: {

            loadUsers(page = "1") {
                let params = new URLSearchParams();

                params.append("current", page);
                params.append("size", this.table.size);

                this.$axios.get("/auth/user/getUserList?"+ params.toString())
                    .then(d => {
                        if (d.data.status == 0) {
                            let pageData = d.data.data;
                            this.table = pageData;

                        }

                    })
                    .catch(e => {

                        message.error("用户数据加载失败");
                    })
            },

            deleteUser(uid) {
                this.$axios.delete("/auth/user/deleteUser?userId=" + uid)
                    .then(d => {
                        if (d.data.status == 0) {
                            message.success("删除成功");

                            this.loadUsers();
                        } else {
                            message.error(d.data.message);
                        }
                    })
                    .catch(e => {
                        message.error("删除失败,未知错误");
                    })
            }

        }
    }
</script>

<style scoped>
    .userManageRoot {

    }

    .oper >>> .anticon {

        margin-right: 16px;
        font-size: 20px;
        cursor: pointer;
    }

    .drawerBottomWrapper {
        position: absolute;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        left: 0;
        background: #fff;
        border-radius: 0 0 4px 4px;
    }

    >>>.ant-table-header{
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
        overflow: hidden !important;
    }
    >>>.ant-table-body{
        overflow-y: auto !important;
    }
    >>>.ant-pagination{
        display: flex;
        justify-content: flex-end;
    }

</style>